{% stylesheet %}
    #cart_icon #cart_number{
        position: absolute;
        top: -3px;
        right: -5px;
        font-size: 9px;
        line-height: 1em;
        font-weight: 500;
        white-space: nowrap;
        min-width: 15px;
        height: 15px;
        background: var(--menu-color);
        color: var(--nav-bg);
        border-radius: 50%;
    }
    .header_icons .user_icon a {
      color: var(--menu-color);
    }
{% endstylesheet %}

<div class="header_icons flex md:gap-4 gap-3 items-center">
  {% if data.is_member %}
    <div class="user_icon">
      <a href="/account/login" class="flex">
        <svg width="24" height="24" viewBox="0 0 26 26" aria-hidden="true">
          <g fill="none" fill-rule="evenodd"><path d="M.5.5h25v25H.5z"></path><g transform="translate(1 1)" stroke="currentColor"><g transform="translate(5.86 7)"><path d="M11.783 15.604A6 6 0 1 0 .186 15.49"></path><circle cx="6" cy="3" r="3"></circle></g><circle cx="12" cy="12" r="12"></circle></g></g>
        </svg>
      </a>
    </div>
  {% endif %}

  {% if data.is_search %}
    <div class="search_icon control-all-search md:flex cursor-pointer hidden">
      <svg width="24" height="24" viewBox="0 0 26 26" aria-hidden="true">
        <g fill="none" fill-rule="evenodd"><g transform="translate(1 1)" stroke="currentColor"><circle cx="10.364" cy="10.364" r="10.364"></circle><path stroke-linecap="square" d="m18 18 5.777 5.788"></path></g></g>
      </svg>
    </div>
  {% endif %}
  <div class="cart_icon flex relative cursor-pointer" id="cart_icon">
    <svg width="24px" height="24px" viewBox="0 0 24 24" aria-hidden="true">
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <polygon stroke="currentColor" points="2 9.25 22 9.25 18 21.25 6 21.25"></polygon>
        <line x1="12" y1="9" x2="12" y2="3" stroke="currentColor" stroke-linecap="square"></line>
      </g>
    </svg>
    <span id="cart_number" class="flex items-center justify-center">0</span>
  </div>
</div>
